/* This file is part of mobile_hybrid_demo (HTML5 demonstration)

Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies).
All rights reserved.

Contact:  Nokia Corporation qt-info@nokia.com

You may use this file under the terms of the BSD license as follows:

"Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met: *
Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer. * Redistributions in binary
form must reproduce the above copyright notice, this list of conditions and the
following disclaimer in the documentation and/or other materials provided with
the distribution. * Neither the name of Nokia Corporation and its
Subsidiary(-ies) nor the names of its contributors may be used to endorse or
promote products derived from this software without specific prior written
permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
*/

// this effect demonstrates css transforms and animations
// also the background is generated by CSS gradient
// there are only three images on screen all the time, so we juggle them around.
// the two images that stay on the screen (the center image transitioning to the side and 
// the side image transitioning to the center) are simple, but to achieve a new image 
// appearing, we have to use multiple timers. first, the image gets transitioned out in 100ms,
// when the transition is over, the new image will be loaded and the transition will be set to 0,
// and the image is moved to where the new image will appear from. after this is done, the 
// image will be transitioned to the screen in 900ms.

var csstransformEffect = {
    images: new Array(),
    moving: false,
    timer: false,
    selected: 2,
    padding: 10,
    margin: 0,
    click: function (x, y) {
        // if clock is on the edge, scroll to that direction
        if (x < 100) csstransformEffect.move(1);
        if (x > window.innerWidth - 100) csstransformEffect.move(-1);
    },
    swipe: function (dir) {
        // also move when swiped
        csstransformEffect.move(-dir);
    },
    drag: function (amt) {},
    releaseDrag: function (amt) {},
    init: function () {
        console.log("flikr init.");
        gete("content").style.background = "	-webkit-gradient( linear, left bottom, left top, color-stop(0.47, rgb(71,72,90)),    color-stop(0.74, rgb(100,101,117)), color-stop(0.87, rgb(130,132,153)))";
        // generate the div to hold the images, and the three images visible on screen
        di = document.createElement("div");
        di.setAttribute("id", "images");
        ip = document.createElement("img");
        ip.setAttribute("id", "previous");
        ip.setAttribute("class", "flikr");
        cp = document.createElement("img");
        cp.setAttribute("id", "current");
        cp.setAttribute("class", "flikr");
        np = document.createElement("img");
        np.setAttribute("id", "next");
        np.setAttribute("class", "flikr");
        di.appendChild(ip);
        di.appendChild(cp);
        di.appendChild(np);
        gete("content").appendChild(di);
        csstransformEffect.setpics();
    },
    start: function () {},
    deinit: function () {
        gete("content").style.background = "white";
        if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1)
        gete("content").removeChild(gete("content").firstChild);
    },
    images: function () {
        // images to preload
        return new Array("images/flikr1.jpg", "images/flikr2.jpg", "images/flikr3.jpg", "images/flikr4.jpg", "images/flikr5.jpg", "images/flikr6.jpg");
    },
    resize: function () {},
    settransition: function () {
        // sets all the transition durations to initial values, after trickery to move the pictures
        gete("previous").style.webkitTransitionDuration = "1s";
        gete("current").style.webkitTransitionDuration = "1s";
        gete("next").style.webkitTransitionDuration = "1s";
    },
    setpics: function () {
        // sets the images to their default positions and initial values
        margin = 0;
        csstransformEffect.padding = window.innerWidth / 46;
        gete("images").style.width = window.innerWidth + "px";
        gete("images").style.height = window.innerHeight + "px";
        // set transition times to 0, to move the pictures instantly
        gete("previous").style.webkitTransitionDuration = "0ms";
        gete("current").style.webkitTransitionDuration = "0ms";
        gete("next").style.webkitTransitionDuration = "0ms";
        // set positions and transform details
        gete("previous").style.left = 2 * (margin + csstransformEffect.padding) + "px";
        gete("current").style.left = 3 * (margin + csstransformEffect.padding) + "px";
        gete("next").style.left = 4 * (margin + csstransformEffect.padding) + "px";
        gete("previous").style.webkitTransformOrigin = "0% 100%";
        gete("current").style.webkitTransformOrigin = "0% 100%";
        gete("next").style.webkitTransformOrigin = "100% 100%";
        gete("previous").style.webkitTransform = "rotate(-90deg)";
        gete("current").style.webkitTransform = "rotate(0deg)";
        gete("next").style.webkitTransform = "rotate(90deg)";
        // set the images to show the right picture
        console.log("IMAGES ARE " + (((csstransformEffect.selected + 5) % 6) + 1) + " " + (((csstransformEffect.selected + 6) % 6) + 1) + " " + (((csstransformEffect.selected + 7) % 6) + 1));
        gete("previous").src = "images/flikr" + (((csstransformEffect.selected + 5) % 6) + 1) + ".jpg";
        gete("current").src = "images/flikr" + (((csstransformEffect.selected + 6) % 6) + 1) + ".jpg";
        gete("next").src = "images/flikr" + (((csstransformEffect.selected + 7) % 6) + 1) + ".jpg";
        // in 10ms, after the images have moved, set the transitions to what they should be
        timer = setTimeout("csstransformEffect.settransition()", 10);
        gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.setpics, false);
        gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.setpics, false);
        ytop = (window.innerHeight - csstransformEffect.padding * 40) / 2;
        gete("current").style.top = ytop + "px";
        gete("previous").style.top = ytop + "px";
        gete("next").style.top = ytop + "px";
        gete("current").style.width = csstransformEffect.padding * 40 + "px";
        gete("next").style.width = csstransformEffect.padding * 40 + "px";
        gete("previous").style.width = csstransformEffect.padding * 40 + "px";
        gete("current").style.height = csstransformEffect.padding * 40 + "px";
        gete("next").style.height = csstransformEffect.padding * 40 + "px";
        gete("previous").style.height = csstransformEffect.padding * 40 + "px";

    },


    transitioncenter: function () {
        // helper function, when we are transitioning to the right, we need to move the rotation origin of the center image
        gete("current").style.webkitTransitionDuration = "1000ms";
        gete("current").style.left = 4 * (margin + csstransformEffect.padding) + "px";
        gete("current").style.webkitTransform = "rotate(90deg)";
    },

    move: function (dir) {
        // this function starts the transition
        // after the transition is complete, loadleft or loadright will be called to load the next image
        if (csstransformEffect.moving) return;
        csstransformEffect.moving = true;
        if (dir == 1) {
            gete("previous").style.zIndex = "2";
            gete("previous").style.left = "1px";
            gete("previous").style.webkitTransitionDuration = "100ms";
            gete("previous").addEventListener('webkitTransitionEnd', csstransformEffect.loadleft, false);
            gete("current").style.webkitTransformOrigin = "0% 100%";
            gete("current").style.webkitTransform = "rotate(-90deg)";
            gete("current").style.left = 2 * (csstransformEffect.padding) + "px";
            gete("next").style.webkitTransform = "rotate(0deg)";
            gete("next").style.left = 3 * (csstransformEffect.padding) + "px";
        }
        if (dir == -1) {
            gete("next").style.zIndex = "2";
            gete("previous").style.left = 3 * (csstransformEffect.padding) + "px";
            gete("previous").style.webkitTransform = "rotate(0deg)";
            // moving right, we need to move the origin first so that the transition is a mirror of the transition to the left
            gete("current").style.webkitTransitionDuration = "0ms";
            gete("current").style.webkitTransformOrigin = "100% 100%";
            // and only then actually transition the center image
            setTimeout("csstransformEffect.transitioncenter()", 10);
            // this bugs if the user is clicking through the images too fast.
            gete("next").style.webkitTransitionDuration = "100ms";
            gete("next").style.left = (6 * (csstransformEffect.padding)) - 1 + "px";
            gete("next").addEventListener('webkitTransitionEnd', csstransformEffect.loadright, false);
        }
    },
    loadleft: function () {
        // loadleft gets called after move()
        // move the disappeared image to the other side to transition it in
        gete("previous").style.left = (6 * (margin + csstransformEffect.padding)) - 1 + "px";
        gete("previous").style.webkitTransform = "rotate(90deg)";
        gete("previous").style.webkitTransformOrigin = "100% 100%";
        gete("previous").style.webkitTransitionDuration = "0ms";
        // load the next image to appear 
        console.log("loading " + (((csstransformEffect.selected + 2) % 6) + 1));
        gete("previous").src = "images/flikr" + (((csstransformEffect.selected + 2) % 6) + 1) + ".jpg";
        setTimeout("csstransformEffect.moveleft();", 1);
        gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.loadleft, false);
    },
    loadright: function () {
        // loadright gets called after move()
        // move the disappeared image to the other side to transition it in
        gete("next").style.left = "1px";
        gete("next").style.webkitTransform = "rotate(-90deg)";
        gete("next").style.webkitTransformOrigin = "0% 100%";
        gete("next").style.webkitTransitionDuration = "0ms";
        // load the next image to appear 
        console.log("!loading " + (((csstransformEffect.selected + 4) % 6) + 1));
        gete("next").src = "images/flikr" + (((csstransformEffect.selected + 4) % 6) + 1) + ".jpg";
        setTimeout("csstransformEffect.moveright();", 1);
        gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.loadright, false);
    },
    moveleft: function () {
        //  move the new image loaded to the screen, and after it is complete, call updateleft
        // this gets called after loadleft
        gete("previous").style.webkitTransitionDuration = "900ms";
        gete("previous").style.left = 4 * (margin + csstransformEffect.padding) + "px";
        gete("previous").addEventListener('webkitTransitionEnd', csstransformEffect.updateleft, false);
        csstransformEffect.selected++;
    },

    moveright: function () {
        //  move the new image loaded to the screen, and after it is complete, call updateright
        // this gets called after loadright
        gete("next").style.webkitTransitionDuration = "900ms";
        gete("next").style.left = 2 * (margin + csstransformEffect.padding) + "px";
        gete("next").addEventListener('webkitTransitionEnd', csstransformEffect.updateright, false);
        // keep selected positive to make things easier
        csstransformEffect.selected = (csstransformEffect.selected + 5) % 6;
    },
    updateleft: function () {
        // this function sets the images back to the default settings, ready to transition again
        // the final function getting called in the transition
        gete("previous").style.zIndex = "0";
        gete("current").style.zIndex = "0";
        gete("next").style.zIndex = "0";
        gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.updateleft, false);
        gete("previous").setAttribute("id", "next2");
        gete("current").setAttribute("id", "previous");
        gete("next").setAttribute("id", "current");
        gete("next2").setAttribute("id", "next");
        gete("previous").style.webkitTransformOrigin = "0% 100%";
        gete("current").style.webkitTransformOrigin = "0% 100%";
        gete("next").style.webkitTransformOrigin = "100% 100%";
        csstransformEffect.moving = false;
        //		csstransformEffect.setpics();
    },

    updateright: function () {
        // this function sets the images back to the default settings, ready to transition again
        // the final function getting called in the transition
        gete("previous").style.zIndex = "0";
        gete("current").style.zIndex = "0";
        gete("next").style.zIndex = "0";
        gete("next").style.zIndex = "0";
        gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.updateright, false);
        gete("next").setAttribute("id", "previous2");
        gete("current").setAttribute("id", "next");
        gete("previous").setAttribute("id", "current");
        gete("previous2").setAttribute("id", "previous");
        gete("previous").style.webkitTransformOrigin = "0% 100%";
        gete("current").style.webkitTransformOrigin = "0% 100%";
        gete("next").style.webkitTransformOrigin = "100% 100%";
        csstransformEffect.moving = false;
        //		csstransformEffect.setpics();
    }


}
